<script setup>
import { useRouter, useRoute } from 'vue-router';
import { getArticleFn } from '@/api/home';
import { ref } from 'vue'

const route = useRoute()
const router = useRouter()
const article = ref({})

getArticleFn({
    paraid: route.query.paraid
}).then(res => {
    // console.log(res);
    article.value = res.data
})

function toback() {
    router.back()
}
</script>

<template>
    <div class="main">
        <van-nav-bar title="文章详情" left-text="返回" left-arrow @click-left="toback" />
        <div class="content">
            <h2>{{ article.title }}</h2>
            <div>
                <span>{{ article.desc }}</span>
                <span>{{ article.data }}</span>
            </div>
            <img :src="article.img">
            <p class="para">{{ article.paragraph }}</p>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.van-nav-bar {
    background-color: rgb(255, 65, 198);
    // color: white;
}

.content {
    padding: 0 10px;

    span {
        margin: 0 10px;
    }

    img {
        margin-top: 20px;
        width: 100%;
        height: 250px;
    }

    .para {
        font-size: 14px;
        text-indent: 2em;
    }
}
</style>